﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery MultiSelect Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!--<script src="http://jqueryjs.googlecode.com/files/jquery-1.8.2.min.js" type="text/javascript"></script>-->

    <script src="../jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="jquery.bgiframe.min.js" type="text/javascript"></script>

    <script src="jquery.multiSelect.js" type="text/javascript"></script>

    <link href="jquery.multiSelect.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(document).ready(function() {

            // Default options
            $("#control_1, #control_3, #control_4, #control_5").multiSelect();

            // With callback
            $("#control_6").multiSelect(null, function(e,display, values) {
            $("#callbackResult").show().fadeOut();
            $("#txtcallbackResult").val(values);
            });

            // Options displayed in comma-separated list
            $("#control_7").multiSelect({ oneOrMoreSelected: '*' });

            // 'Select All' text changed
            $("#control_8").multiSelect({ selectAllText: 'Pick &lsquo;em all!' });

            // Show test data
            $("FORM").submit(function() {
                var results = $(this).serialize().replace(/&/g, '\n');
                results = decodeURI(results);
                alert(results);
                return false;
            });

        });
			
    </script>

    <style type="text/css">
        HTML
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        H2
        {
            font-size: 14px;
            font-weight: bold;
            margin: 1em 0em .25em 0em;
        }
        P
        {
            margin: 1em 0em;
        }
    </style>
</head>
<body>
    <form action="" method="post">
    <h1>
        jQuery MultiSelect</h1>
    <p>
        Feel free to view the source code of this page to see how the MultiSelect controls
        are being implemented.
    </p>
    <p>
        <strong>Tip: </strong>try navigating the menu using the keyboard: down, up, tab,
        enter, space, esc
    </p>
    <h2>
        Control 1: Default options</h2>
    <p>
        <select id="control_1" name="control_1[]" multiple="multiple" size="5">
            <option value=""></option>
            <option value="option_1">Option 1</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_5">Option 6</option>
            <option value="option_5">Option 7</option>
            <option value="option_5">Option 8</option>
            <option value="option_5">Option 9</option>
            <option value="option_5">Option 10</option>
            <option value="option_5">Option 11</option>
            <option value="option_5">Option 12</option>
        </select>
    </p>
    <h2>
        Control 2: IE6 Layering Bug Test <span style="color: #C00;">(Fails)</span></h2>
    <p>
        <select id="control_2" name="control_2[]">
            <option value="option_1">IE6 TEST</option>
            <option value="option_2">IE6 TEST</option>
            <option value="option_3">IE6 TEST</option>
            <option value="option_4">IE6 TEST</option>
            <option value="option_5">IE6 TEST</option>
            <option value="option_6">IE6 TEST</option>
            <option value="option_7">IE6 TEST</option>
            <option value="option_8">IE6 TEST</option>
            <option value="option_9">IE6 TEST</option>
            <option value="option_10">IE6 TEST</option>
        </select>
    </p>
    <h2>
        Control 3, 4, 5: Pre-selected options</h2>
    <p>
        <select id="control_3" name="control_3[]" multiple="multiple" size="5">
            <option value=""></option>
            <option value="option_1" selected="selected">Option 1</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_6">Option 6</option>
            <option value="option_7">Option 7</option>
        </select>
        <select id="control_4" name="control_4[]" multiple="multiple" size="5">
            <option value=""></option>
            <option value="option_1" selected="selected">Option 1</option>
            <option value="option_2" selected="selected">Option 2</option>
            <option value="option_3">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_6">Option 6</option>
            <option value="option_7">Option 7</option>
        </select>
        <select id="control_5" name="control_5[]" multiple="multiple" size="5">
            <option value=""></option>
            <option value="option_1" selected="selected">Option 1</option>
            <option value="option_2" selected="selected">Option 2</option>
            <option value="option_3" selected="selected">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_6">Option 6</option>
            <option value="option_7">Option 7</option>
        </select>
    </p>
    <h2>
        Control 6: With callback</h2>
    <p>
        CallBack and result selected values:<input type="text" id="txtcallbackResult" /><br />
        <span id="callbackResult" style="display: none;">Callback triggered!</span><br />
        <select id="control_6" name="control_6[]" multiple="multiple" size="5">
            <option value=""></option>
            <option value="option_1">Option 1</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_6">Option 6</option>
            <option value="option_7">Option 7</option>
        </select>
    </p>
    <h2>
        Control 7: Options displayed in comma-separated list</h2>
    <p>
        <select id="control_7" name="control_7[]" multiple="multiple" style="width: 320px;">
            <option value="option_1">Option 1dddddd</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_6">Option 6</option>
            <option value="option_7">Option 7</option>
        </select>
    </p>
    <h2>
        Control 8: &ldquo;Select All&rdquo; text changed</h2>
    <p>
        <select id="control_8" name="control_8[]" style="width: 400px;" multiple="multiple">
            <option value=""></option>
            <option value="option_1">Option 1</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
            <option value="option_4">Option 4</option>
            <option value="option_5">Option 5</option>
            <option value="option_6">Option 6</option>
            <option value="option_7">Option 7</option>
        </select>
    </p>
    <p>
        <input type="submit" value="Show Results" />
    </p>
    </form>
</body>
</html>
